<!-- 线路管理-->
<template>
    <div class="safelist-search-container resource-manage" v-if="!state.isEdit">
        <div class="mb16 flex-sba">
            <a-row class="search-row" :gutter="20">
                <a-col>
                    线路名称:
                    <a-input v-model:value="state.searchData.likeName" style="width: 200px;" placeholder="输入线路名称" />
                </a-col>
                <a-col>
                    线路状态:
                    <a-select v-model:value="state.searchData.optStatus" style="width: 200px;" placeholder="请选择线路状态"
                        allowClear>
                        <!-- <a-select-option value="正常">正常</a-select-option>
                        <a-select-option value="停用">停用</a-select-option>
                        <a-select-option value="调整中">调整中</a-select-option> -->
                        <a-select-option v-for="item in getEnumOptions('optStatus')" :key="item.value"
                            :value="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                </a-col>
                <a-col>
                    <a-button type="primary" class="mr8" @click="handleSearch">搜索</a-button>
                    <a-button type="primary" ghost @click="handleEmpty">重置</a-button>
                </a-col>
            </a-row>
            <div>
                <a-button type="primary" danger class="nmc-add-btn-primary" @click="addRole(1)">新增</a-button>
            </div>
        </div>
        <div class="safelist-table-container">
            <a-table :columns="tableProps.columns" :data-source="tableProps.dataSource"
                :pagination="tableProps.pagination" :scroll="{ y: 'calc(100vh - 320px)' }" :loading="state.loading">

                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex == 'optStatus'">
                        <span>
                            {{ getEnumValue('optStatus', record.optStatus) }}
                        </span>
                    </template>
                    <template v-if="column.dataIndex == 'action'">
                        <a v-if="record.optStatus === '停用'" style="margin-right: 8px; color: #1890ff;"
                            @click='handleApprove(record)'>审批</a>
                        <a style="margin-right: 8px; color: #1890ff;" @click='addRole(2, record)'>编辑</a>
                        <a style="margin-right: 8px; color: #ff4d4f;" @click='getRoleDelete(record)'>删除</a>
                    </template>
                </template>
            </a-table>
        </div>
    </div>

    <!-- 编辑页面 -->
    <lineEdit v-show="state.isEdit" ref="lineEditRef" @update:visible="handleEditClose" @success="handleEditSuccess" />
</template>

<script setup lang='jsx'>
import { onMounted, reactive, ref, unref, defineProps, createVNode, defineOptions } from 'vue'
// import { supplierPage } from "@/service/charging"
import { useRouter } from 'vue-router'
import { message, Modal } from "ant-design-vue"
import { ExclamationCircleOutlined } from "@ant-design/icons-vue"
import { useMainStore } from "@/store"
import LineEdit from './components/lineEdit.vue'
import { bizLineQueryPage, bizLineDelete } from "@/service/nmcApi"

import { getEnumOptions, getEnumValue } from '@/utils/enum'
defineOptions({
    name: 'lineManage'
})

const router = useRouter()
const mainStore = useMainStore()

const lineEditRef = ref(null)


const tableProps = ref({
    columns: [
        {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            customRender: ({ text, record, index, column }) => {
                return (tableProps.value.pagination.current - 1) * tableProps.value.pagination.pageSize + Number(index) + 1;
            }
        },
        {
            title: '线路名称',
            dataIndex: 'name',
        },
        {
            title: '关联车辆',
            dataIndex: 'associatedVehicles',
        },
        {
            title: '线路状态',
            dataIndex: 'optStatus',
        },
        {
            title: '线路长度',
            dataIndex: 'distance',
        },
        {
            title: '备注',
            dataIndex: 'description',
        },
        {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            width: 200
        }
    ],
    dataSource: [], //列表数据
    pagination: {
        current: 1,//当前页数
        pageSize: 10,//每页条数
        total: 0,
        showSizeChanger: true,
        showTotal: (total) => `${total}条`,
        showQuickJumper: true,
        onChange: (current, pageSize) => {
            tableProps.value.pagination.current = current;
            tableProps.value.pagination.pageSize = pageSize;
            getRolePage();
        }
    }
})

const state = reactive({
    loading: false,
    //搜索数据
    searchData: {
        likeName: null, //线路名称
        optStatus: null, //线路状态
    },
    isEdit: false,
    editData: {}
})

onMounted(async () => {
    getSoure();
    getRolePage();
})

// 基础数据
const getSoure = (type, row) => {

}

const addRole = (type, record) => {
    // type 1 新增 2 编辑
    if (type === 1) {
        // 新增线路
        state.editData = {}
    } else if (type === 2) {
        // 编辑线路
        state.editData = { ...record }
    }
    lineEditRef.value.loadEditData(state.editData, type == 2 ? 'edit' : 'add')
    state.isEdit = true
}

// 处理审批
const handleApprove = (record) => {
    Modal.confirm({
        title: '审批确认',
        icon: createVNode(ExclamationCircleOutlined),
        content: `您是否要审批通过"${record.name}"？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
            return new Promise((resolve, reject) => {
                // 审批逻辑
                message.success('审批成功')
                getRolePage()
                resolve()
            })
        },
    });
}

// 处理编辑关闭
const handleEditClose = (visible) => {
    if (!visible) {
        state.isEdit = false
        state.editData = {}
    }
}

// 处理编辑成功
const handleEditSuccess = (data) => {

    state.isEdit = false
    state.editData = {}
    getRolePage() // 刷新列表
}

//获取列表数据
const getRolePage = () => {
    state.loading = true
    let params = {
        ...state.searchData,
        pageNo: tableProps.value.pagination.current,
        pageSize: tableProps.value.pagination.pageSize
    }
    bizLineQueryPage(params).then(res => {
        state.loading = false
        if (res && res.status === "000_0000_0000") {
            tableProps.value.dataSource = res.result.list
            tableProps.value.pagination.total = Number(res.result.total)
        } else {
            tableProps.value.dataSource = []
            tableProps.value.pagination.total = 0
        }
    }).catch(err => {
        console.error('获取线路列表失败:', err)
        tableProps.value.dataSource = []
        tableProps.value.pagination.total = 0
        message.error('获取列表失败，请检查网络连接')
    }).finally(() => {
        state.loading = false
    })


}
//搜索
const handleSearch = () => {
    tableProps.value.pagination.current = 1
    getRolePage()
}
//重置
const handleEmpty = () => {
    state.searchData = {
        likeName: null, //线路名称
        optStatus: null, //线路状态
    }
    tableProps.value.pagination.current = 1
    tableProps.value.pagination.pageSize = 10
    getRolePage()
}

// 点击 删除
const getRoleDelete = (record) => {
    Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: `您是否要删除"${record.name}"？`,
        okText: '确认',
        cancelText: '取消',
        onOk() {
            return new Promise((resolve, reject) => {
                bizLineDelete({id: record.id}).then(res => {
                    if (res && res.status === "000_0000_0000") {
                        message.success('删除成功')
                        getRolePage()
                        resolve()
                    }
                }).catch(err => {
                    message.error('删除失败')
                    resolve()
                })
            })
        },
    });
}

</script>
<style lang="less" scoped>
.resource-manage {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.safelist-table-container {
    height: calc(100% - 48px);
    overflow: hidden;
}
</style>
